design-patterns-nuxt/pages/details/[id].vue

<template>
  <section class="flex flex-col items-center min-h-screen">
    <div class="container w-full p-6 max-w-6xl grow flex flex-col items-center bg-slate-300">
      <NuxtLink class="w-full m-4 flex justify-end" :to="'/'">
        <uiClose />
      </NuxtLink>
      <img class="rounded-lg mb-6" :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">

      <div class="poster flex flex-col lg:flex-row w-full justify-center">
        <span>
          <h1 class="text-4xl font-bold leading-relaxed">
            {{ film.title }}
          </h1>
          <h2 class="text-2xl text-slate-700">
            {{ director }}
          </h2>
          <p class="my-8">
            {{ film.overview }}
          </p>
          <p>
            {{ formatPercent(film.vote_average) }} %
          </p>
          <p>
            {{ film.vote_count }} votes
          </p>
          <div class="flex justify-center">
            <ul class="flex items-center overflow-y-hidden overflow-x-scroll w-full max-w-lg">
              <li v-for="star in film.credits.cast" class="flex flex-col items-center p-4 bg-slate-200 rounded m-4">
                <UiPerson class="h-10" />
                {{ star.name }}
              </li>
            </ul>
          </div>
          <ul class="flex">
            <li v-for="genre in film.genres" class="p-8"> {{ genre.name }} </li>
          </ul>
        </span>
      </div>
      <div>
        <CommentForm :filmId="film.id" />
        <CommentList :filmId="film.id" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const router = useRouter()
const config = useRuntimeConfig()
const film = ref()
const route = useRoute()
const filmId = ref('')
const director = ref('')

filmId.value = route.params.id

if (filmId.value !== '') {
  const { data } = await useFetch(`/api/details/${filmId.value}`)
  film.value = data.value
  director.value = film.value.credits.crew.filter((member) => member.job === 'Director')
  director.value = director.value[0].name
}

onMounted(() => {
  window.scrollTo(0, 0)
})
</script>